<template>
<!-- 博客工作台 -->
  <div class="blogBanch">
    <div class="blogBox">
        <!-- 博客信息 -->
        <div class="blogInfo">
            <span class="ipt1" >标题：<input type="text" v-model="title"></span>
            <span class="ipt2">分类：<input type="text"  v-model="sort"></span>
            <span class="ipt3" >文章封面：</span>
            <span class="ipt4">
                <input type="file" name="file" accept=".jpg, .jpeg, .png" 
                @change="uploadAvatar">
            </span>
            <div class="pic" v-show="cover_img"> <img :src="'http://1.12.58.122:3007/'+cover_img" alt=""></div>
        </div>
        <div class="summary">
            <span>简介:<input type="text" v-model="summary"></span>
            <span class="span2">正文</span>
        </div>
         <!-- 博客编辑 -->
        <div class="workBench">
            <mavon-editor v-model="context" @imgAdd="imgAdd"  ref="md" codeStyle="atom-one-dark"></mavon-editor>
            <!-- 保存草稿 -->
            <span class="save" @click="saveBlog" >
                <i class="iconfont icon-baocun icon1"></i>
            </span>
            <!-- 发布博客 -->
            <span class="publish" @click="publishBlog">
                <i class="iconfont icon-fabu icon2"></i>
            </span>
        </div>
    </div>
   
  </div>
</template>

<script>
export default {
    name:'blog',
    data(){
        return {
            title:'',
            sort:'',
            context:'',
            cover_img:'7a39da00-39bc-11ed-80e8-1bf5006fa095.png',
            summary:''
        }
    },
    methods:{
        // 上传封面
        uploadAvatar(avatar) {
            console.log(avatar.target.files[0])
            let file = avatar.target.files[0]
            let data = new FormData();
            console.log(data)
            data.append("file", file, file.name); 
            data.append('data', 112)
            console.log('123',data.get('file'))
            this.$axios.post('http://1.12.58.122:3007/api/zhutu', data).then((data)=> {
                console.log(data)
                this.cover_img = data.data.msg
            }, function(response) {
                console.log(response)
            })
        },
        // 上传mavonEditor中的图片
        imgAdd(pos,file){    
            // 上传图片
            let data = new FormData()
            data.append("file", file, file.name); 
            data.append('data', 112)
            console.log('123',data.get('file'))
            this.$axios.post('http://1.12.58.122:3007/api/zhutu', data).then((data)=> {
                console.log(data)
                // this.$refs.md.$img2Url(pos, data.data.msg) 
                this.$refs.md.$img2Url(pos, 'http://1.12.58.122:3007/' + data.data.msg)
            }, function(response) {
                console.log(response)
            })
        },
        // 保存草稿
        async saveBlog(){
            // 调用save接口，向服务器添加草稿
            // 保存之前 先把以前的草稿都清了
            await this.$axios.post('http://1.12.58.122:3007/api/article/deleteDraft')
            let res =await this.$axios.post('http://1.12.58.122:3007/api/article/save',{title:this.title,sort:this.sort,context:this.context,
            cover_img:this.cover_img,summary:this.summary})
            console.log(res.data)
        },
        // 发布博客
        async publishBlog(){
            // 获取当前时间
            let dt = new Date()
            var y = dt.getFullYear()
            var mt = (dt.getMonth() + 1).toString().padStart(2,'0')
            var day = dt.getDate().toString().padStart(2,'0')
            var h = dt.getHours().toString().padStart(2,'0')
            var m = dt.getMinutes().toString().padStart(2,'0')
            var nowtime = y + "-" + mt + "-" + day + " " + h + ":" + m 
            var time = y + "-" + mt + "-" + day
            // 调用add函数 向服务器添加博客
            let res = await this.$axios.post('http://1.12.58.122:3007/api/article/add',{title:this.title,sort:this.sort,context:this.context,
                cover_img:this.cover_img,summary:this.summary,time:time,nowtime:nowtime,last:time})
                console.log(res)
            // 发布成功之后把原来的草稿清空
            if(res.data.status==0){
                let res1 = await this.$axios.post('http://1.12.58.122:3007/api/article/deleteDraft')
                this.title = ''
                this.sort=''
                this.context=''
                this.cover_img='7a39da00-39bc-11ed-80e8-1bf5006fa095.png'
                this.summary = ''
                this.$router.push({
                    path:'/admin'
                })
            }   
        },      
    },
    // mounted的时候获取草稿
    async mounted(){
        let res = await this.$axios.get('http://1.12.58.122:3007/api/article/get')
        if(res.data.length > 0 ){
            this.title = res.data[0].title
            this.sort = res.data[0].sort
            this.cover_img = res.data[0].cover_img
            this.context = res.data[0].context
            this.summary = res.data[0].summary
        }
    }
    // mounted(){
    //     this.$store.dispatch('getBlogs')
    // }
}
</script>

<style scoped>
.blogBanch {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: transparent;
}
.blogBox {
    position: absolute;
    top: 10%;
    left: 10%;
    background-color: transparent;
    height: 90%;
    width: 80%;
}
.blogInfo {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%);
    height: 20%;
    width: 70%;
    background-color:white;
    font-size: 16px;
    text-align: left;
}
.ipt1 {
    position: absolute;
    top: 20%;
    left: 5%;
    display: inline-block;
    height: 30%;
    width: 80%;
}
.ipt2 {
    position: absolute;
    top: 50%;
    left: 5%;
    display: inline-block;
    height: 30%;
    width: 80%;
}
.text {
    position: absolute;
    top: 75%;
    left: 5%;
    font-size: 20px;
}
.summary{
    position:absolute;
    top: 20%;
    left: 50%;
    transform: translate(-50%);
    height: 20%;
    width: 70%;
    background-color:white;
    font-size: 16px;
    text-align: left;
    border-top:1px black solid;
}
.summary span {
    position: absolute;
    top: 10%;
    left: 5%;
}
.summary .span2{
    position: absolute;
    top: 70%;
    left: 5%;
}
.workBench{
    position: absolute;
    top: 40%;
    left: 0;
    height: 80%;
    width: 100%;
    background-color:transparent;
}
.ipt3 {
    position: absolute;
    top: 20%;
    left: 50%;
    display: inline-block;
    height: 30%;
    width: 80%;
}
.ipt4 {
    position: absolute;
    top: 50%;
    left: 50%;
    display: inline-block;
    height: 30%;
    width: 80%;
}
.pic {
    position: absolute;
    top: 0;
    right: 0;
    background-color:white;
    width: 10%;
    height: 100%;
    z-index: 1;
}
.pic img {
    position: absolute;
    top: 50%;
    height: 50%;
    transform: translate(-50%,-50%);
    width: 100px;
    height: 100px;
    background-size: 100% 100%;
}
.save{
    position:fixed;
    top: 28%;
    right: 4%;
    background-color: white;
    height: 5%;
    width: 5%;
    color: blue;
    border-radius: 10px;
}
.publish {
    position:fixed;
    top: 34%;
    right: 4%;
    background-color: white;
    height: 5%;
    width: 5%;
    border-radius: 10px;
}
.icon1 {
    font-size: 30px;
}
.icon2 {
    font-size: 30px;
    color: orange;
}
</style>